<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-10 22:56:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-07-17 23:41:25
 * @FilePath: /chat-ai-plus/src/components/Popup/Popup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE, 
-->
<template>
  <u-popup
    :show="true"
    class="popup"
    mode="left"
    :closeOnClickOverlay="true"
    :customStyle="{ width: '60%' }"
    @close="handleCancel"
  >
    <scroll-view
      class="full p_default scroll"
      :style="styles"
      scroll-y="true"
      :scroll-top="scrollTop"
      upper-threshold="300"
      @scrolltolower="scrollTopAction"
    >
      <view class="slider-container">
        <view class="align-items_center justify_between">
          <view class="align-items_center">
            <u-image
              height="20px"
              width="30px"
              mode="heightFix"
              src="/static/images/logo@2x.png"
            ></u-image>
            <text class="weight_bolder ml_xs">ChatSmart</text>
          </view>
          <view>
            <u-button
              shape="circle"
              class="px_unset"
              icon="close"
              size="small"
              @click="handleCancel"
            ></u-button>
          </view>
        </view>

        <view class="heading mt_default">{{ $t('app.models.heading') }}</view>
        <radio-group class="models-container mt_sm" @change="handleChange">
          <label class="model-label" v-for="item in models" :key="item.value">
            <radio class="hide" :value="item.value" />
            <view
              class="model-item"
              :class="{ active: model.value === item.value }"
            >
              <u-image
                width="28px"
                height="28px"
                :src="`/static/images/${item.icon}@2x.png`"
                shape="circle"
              ></u-image>
              <div>{{ item.name }}</div>
            </view>
          </label>
        </radio-group>

        <div class="pt_default">
          <div class="chat-history-group">
            <div class="heading">对话记录</div>
          </div>
          <u-swipe-action class="swipe-action mt_xs" autoClose>
            <u-swipe-action-item
              v-for="item in historyTopics"
              :key="item.id"
              :options="options1"
              class="swipe-action-item"
              @click="handleTool($event, item)"
            >
              <view class="p_sm" @click="handleClick(item)">
                <text>    {{ item.roomName || '新对话' }}</text>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </div>

        <!-- <div class="pt_default">
          <div class="chat-history-group">
            <div class="heading">对话记录</div>
            <div class="chat-list mt_xs">
              <div
                class="chat-item"
                v-for="item in historyTopics"
                :key="item.id"
              >
                <div
                  class="align-items_center gap_xs flex py_sm t_line"
                  @click="handleClick(item)"
                >
                  <u-icon class="icon" name="chat-fill"></u-icon>
                  <div class="content t_line">
                    {{ item.roomName || '新对话' }}
                  </div>
                </div>

                <div class="align-items_center">
                  <u-icon
                    class="icon icon-btn"
                    name="star"
                    @click="handleCollect(item)"
                  ></u-icon>
                  <u-icon
                    class="icon icon-btn ml_xs"
                    name="trash"
                    @click="handleRemove(item)"
                  ></u-icon>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </view>
    </scroll-view>
  </u-popup>
</template>

<script lang="ts">
import { computed, defineComponent, ref, onMounted, reactive, watch } from 'vue';
import uPopup from 'uview-plus/components/u-popup/u-popup.vue';
import uOverlay from 'uview-plus/components/u-overlay/u-overlay.vue';
import uTransition from 'uview-plus/components/u-transition/u-transition.vue';
import useChatStore from '@/store/modules/chat';
import ChatHistoryGroup from '../ChatHistory/ChatHistoryGroup.vue';
import { aiModels } from '@/model/index';

export default defineComponent({
  name: 'PopupInstruct',
  components: {
    uPopup,
    uOverlay,
    uTransition,
    ChatHistoryGroup,
    //Sider
  },
  emits: ['vanish'],
  setup(_, { emit }) {
    const handleCancel = () => {
      emit('vanish');
    };

    const chatStore = useChatStore();
    const models = [
      {
        id: 1,
        icon: 'GPT3',
        name: 'GPT-3.5',
        value: 'GPT-3.5',
        description: 'Default chatbot model provided by OpenAl.',
        version: 1,
        enable: true,
      },
      {
        id: 2,
        icon: 'GPT4',
        name: 'GPT-4',
        value: 'GPT-4',
        description: 'A more advanced system, producing safer and more useful',
        version: 2,
        enable: false,
      },
      {
        id: 3,
        icon: 'DALLE',
        name: 'DALL·E',
        value: 'DALL·E',
        description: 'A creative and helpful collaborator, developed b',
        version: 3,
        enable: false,
      },
    ];
    const model = computed(() => chatStore.currentModel);
    const handleChange = event => {
      chatStore.clearConversations();
      chatStore.setCurrentRoom();
      chatStore.toggleModel(event.detail.value);
      handleCancel();
    };

    const historyTopics = computed(() => {
      return chatStore.historyTopics;
    });

    let page = 0;
    const size = 20;
    let maxPage = 0;

    const getData = async (page: number) => {
      const response = await chatStore.getTopicList({
        archive: 0,
        page,
        size,
         version: chatStore.currentModel.version
      });
      const { totalElements } = response.data;
      maxPage = Math.ceil(totalElements / size);
    };


     watch(
      () => chatStore.currentModel,
      (model) => {
        page = 0;
        scrollTop.value = 0;

        getData(page)
      }
    );

    const scrollTopAction = () => {
      page += 1;
      if (page < maxPage) {
        getData(page);
      }
    };

    const scrollTop = ref(0);

    onMounted(() => {
      chatStore.clearTopic();
      getData(page);
    });

    const handleClick = (item: any) => {
      // console.log('handleClick',item, nsmr)
      chatStore.setCurrentRoom(item);
      chatStore.getConversationsById({ roomId: item.id });
      handleCancel();
    };



    const styles = reactive({
      width: '320px',
      height: '100%',
    });

    uni.getSystemInfo({
      success(res) {
        styles.width = `${
          res.windowWidth < 576 ? res.windowWidth : res.windowWidth * 0.4
        }px`;

        styles.height = `${res.windowHeight}px`;
      },
    });

    const handleRemove = (item: any) => {
      chatStore.removeTopic(item.id);
    };

    const handleCollect = item => {
      chatStore.collectTopic(item.id);
    };

    const handleTool = (event, item) => {
      console.log('handleTool',event, item)
      if(event.index  === 0) {
        handleCollect(item)
      }else if(event.index === 1) {
        handleRemove(item)
      }
    }
    const options1 = reactive([
      {
        text: '收藏',
        name: 'collect',
        style: {
          backgroundColor: '#3c9cff',
        },
      },
      {
        text: '删除',
        name: 'remove',
        style: {
          backgroundColor: '#f56c6c',
        },
      },
    ]);

    return {
      options1,
      handleCancel,
      model,
      handleChange,
      models,
      historyTopics,
      scrollTop,
      scrollTopAction,
      handleClick,
      styles,
      handleRemove,
      handleCollect,
      handleTool
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.scroll {
  background: #fff;
  box-sizing: border-box;
}

.slider-container {
  background: $white-color;
}

.models-container {
  $size: map-get($spaces, sm);
  .model-label {
    display: block;
    & + .model-label {
      margin-top: $size;
    }
  }
  .model-item {
    display: flex;
    align-items: center;
    border-radius: $radius;
    border: solid 1px map-get($border-colors, default);
    padding: map-get($spaces, xs);
    gap: $size;
  }
  .model-item.active {
    background: map-get($theme-colors, primary);
    color: $white-color;
    border-color: map-get($theme-colors, primary);
  }
}

.chat-history-group {
  & + .chat-history-group {
    margin-top: map-get($spaces, default);
  }
}

.chat-list {
  $size: map-get($spaces, sm);
  .chat-item {
    display: flex;
    align-items: center;
    gap: map-get($spaces, xs);
    border-radius: $radius;
    border: solid 1px map-get($border-colors, dark);
    padding: 0 $size;
    background: $white-color;
    cursor: pointer;
    & + .chat-item {
      margin-top: map-get($spaces, xs);
    }

    &.active,
    &:hover {
      border-color: map-get($theme-colors, primary);
      color: map-get($theme-colors, primary);
      background: rgba(map-get($theme-colors, primary), 0.1);
    }

    & > .icon {
      color: map-get($theme-colors, primary) !important;
      :deep(.u-iconfont) {
        color: map-get($theme-colors, primary) !important;
      }
    }

    .content {
    }
  }
}

.swipe-action {
  .swipe-action-item {
    border: solid 1px map-get($border-colors, dark);
    border-radius: $radius;
    & + .swipe-action-item {
      margin-top: map-get($spaces, sm);
    }
  }
}
</style>

